<template>
  <div class="no-print">
    <a-card title="原单据流程历史跟踪">
      <a-table
        rowKey="taskId"
        :loading="loading"
        :dataSource="dataSource"
        :columns="columns"
        size="small">
        <!-- 字符串超长截取省略号显示-->
        <span slot="remarks" slot-scope="text, record">
          <j-ellipsis :value="getNodeInfo(record)" :length="25"/>
        </span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import { getAction } from '@/api/manage'
  export default {
    name: 'CommonFlowList',
    components: {
      JEllipsis
    },
    props: {
      formData: {
        type: Object,
        default: () => {}
      }
    },
    data () {
      return {
        loading: false, // icon Loading
        dataSource: [], // 列表数据
        nodePositionInfo: {},
        url: {
          list: '/api/erpmng/act/task/processHistoryList', // 列表接口
          getNodePositionInfo: '/api/erpmng/act/task/getNodePositionInfo'
        },
        columns: [
          {
            title: '序号',
            rowKey: (record, index) => index,
            width: 60,
            customRender(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '名称',
            dataIndex: 'name'
          }, {
            title: '流程实例ID',
            dataIndex: 'processInstanceId'
          }, {
            title: '开始时间',
            dataIndex: 'startTime'
          }, {
            title: '结束时间',
            dataIndex: 'endTime'
          }, {
            title: '负责人',
            dataIndex: 'assigneeName'
          }, {
            title: '处理结果',
            dataIndex: 'deleteReason'
          }, {
            title: '处理意见',
            dataIndex: 'remarks'
          }
        ]
      }
    },
    created() {
      // this.loadData()
      // this.getNodePositionInfoData()
    },
    watch: {
      formData: {
        handler (val) {
          if (val.procInsId) {
            this.getNodePositionInfoData();
            this.loadData();
          }
        },
        immediate: true
      }
    },
    mounted() {
    },
    methods: {
      loadData() {
        this.loading = true;
        var params = { processInstanceId: this.formData.procInsId };// 查询条件
        getAction(this.url.list, params).then(res => {
          if (res.success) {
            this.dataSource = res.result.records
          } else {
            this.$message.warn('加载失败')
          }
        }).catch(e => {
          console.error(e)
        }).then(() => {
          this.loading = false
        })
      },

      // 查询坐标信息数据
      getNodePositionInfoData() {
        var params = { processInstanceId: this.formData.procInsId };// 查询条件
        getAction(this.url.getNodePositionInfo, params).then(res => {
          if (res.success) {
            this.nodePositionInfo = res.result
          }
        }).catch(e => {
          console.error(e)
        }).then(() => {

        })
      },

      getNodeInfo(record) {
        var data = this.nodePositionInfo.hisTasks;
        if (data) {
          for (var item of data) {
            if (item.id == record.id) {
              return item.remarks;
            }
          }
        }
        return '';
      }
    }
  }
</script>
<style lang="less" scoped>

</style>
